<template>
  <div class="searchresult">
    <!-- 顶部栏 -->
    <van-nav-bar
      title="搜索结果"
      left-arrow
      :placeholder="true"
      fixed
      @click-left="onClickLeft"
    />
    <!-- 下方内容 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="一滴都不剩了"
      @load="onLoad"
    >
      <!-- 内容 -->
      <van-cell class="item" v-for="(item, index) in list" :key="index" @click="$router.push(`/detail/${item.art_id}`)">
        <template #title>
          <!-- 标题 -->
          <h3>{{ item.title }}</h3>
          <!-- 图片 -->
          <van-grid
            v-if="item.cover.type !== 0"
            :border="false"
            :column-num="3"
          >
            <van-grid-item
              v-for="(imgitem, imgindex) in item.cover.images"
              :key="imgindex"
            >
              <van-image lazy-load :src="imgitem" />
            </van-grid-item>
          </van-grid>
          <!-- 底部信息 -->
          <div class="info">
            <div class="left">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }}评论</span>
              <span>{{ item.pubdate | fromtime }}</span>
            </div>
          </div>
          <!-- 宫格 -->
          <van-grid :column-num="3" direction="horizontal">
            <van-grid-item
              icon="comment-o"
              :text="item.comm_count.toString()"
              @click.stop="userComment"
            />
            <van-grid-item
              icon="good-job-o"
              :text="item.like_count.toString()"
              @click.stop="like"
            />
            <van-grid-item icon="share" text="分享" @click.stop="share" />
          </van-grid>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { getResult } from '@/api/search.js'
import { Lazyload } from 'vant'
import Vue from 'vue'
Vue.use(Lazyload)

export default {
  data () {
    return {
      loading: false,
      finished: false,
      list: [],
      page: 1,
      perPage: 10,
      q: this.$route.params.key || ''
    }
  },
  methods: {
    // 点击返回
    onClickLeft () {
      this.$router.back()
    },
    // 上拉加载更多
    async onLoad () {
      const res = await getResult(this.page, this.perPage, this.q)
      this.list = [...this.list, ...res.data.data.results]
      this.loading = false
      this.page++
      if (res.data.data.results.length === 0) {
        this.finished = true
      }
    },
    // 评论
    userComment () {
      if (!this.$login()) {
        return
      }
      console.log('评论')
    },
    // 点赞
    like () {
      if (!this.$login()) {
        return
      }
      console.log('点赞成功')
    },
    // 分享
    share () {
      this.$toast.fail('分享功能尚未实现')
    }
  }
}
</script>

<style lang="less" scoped>
.searchresult {
  /deep/ .van-nav-bar--fixed {
    z-index: 10;
    background-color: #3e9df8;
    .van-nav-bar__title {
      color: #fff;
      transform: translateY(8px);
    }
    .van-nav-bar__arrow {
      color: #fff;
      transform: translateY(8px);
    }
  }
  .item {
    .info {
      display: flex;
      justify-content: space-between;
      .left {
        span {
          margin-left: 8px;
        }
      }
    }
  }
}
</style>
